<template>
 	<view class="container">
 		<view class="login-title" :style="'padding-top:' + top + 'px'">
			<image src="/static/login/hemei_logo.png" mode="scaleToFill"></image>
 		</view>
 		<view class="content">
			<view class="form-input">
				<view class="input-left">
					<view class="text">账号</view>
				</view>
				<view class="input">
					<u-input
						color="#7F7F7F"
					    placeholder="请输入您的账号"
						clearable
					    border="bottom"
						v-model="form.userName"
						placeholderStyle="color: #C6C6C6; font-size: 14px;"
						@change="onChangeUserName"
					  ></u-input>
				</view>
			</view>
			<view class="form-input">
				<view class="input-left">
					<view class="text">密码</view>
				</view>
				<view class="input" style="border-bottom: 1px solid #dadbde;">
					<basic-input 
						placeholder="请输入您的密码"
						:clearable="true"
						v-model="form.password"
						@change="onChangePassword" 
						style="margin-left: 20rpx;"
						type="password"
						:border="false" 
						placeholderStyle="color: #C6C6C6; font-size: 14px;" 
						:custom-style="{color: '#7F7F7F'}"
					></basic-input>
				</view>
			</view>
 			<view class="btn">
 				<u-button
					class="custom-style"
					hover-class="none"
					color="#002dd2"
					:disabled="form.password == '' || form.userName == ''?true:false"
					@click="_login"
				>
				 登录
 				</u-button>
 			</view>
 		</view>
		
		<view class="slogan">
			<image src="/static/login/hemei_slogan.png" mode="scaleToFill"></image>
		</view>
		
		<!-- 部门弹窗选择 -->
		<departmentChoice :show="showDepartment" @click="onChoice" @close="onClose" @choice="onNavgat"></departmentChoice>
 		<u-no-network></u-no-network>
		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
 <script>
 	import { login, sysJpushUserRelationsPush } from '../../api/index.js'
	import http from '@/utils/request/index'
	import moment from 'moment'
 	import {
 		mapState,
 		mapActions
 	} from 'vuex';
	import store from '@/store/index.js';
 	import departmentChoice from '@/components/departmentChoice.vue'
 	import BasicInput from '@/components/BasicInput/BasicInput.vue'
	// #ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush")
	// #endif
 	export default {
 		components: {
			departmentChoice, // 部门弹窗选择
			BasicInput
 		},
 		data() {
 			return {
				top: 0,
 				form: {
 					userName: '',
 					password: '',
 				},
 				flag: true, //是否记住密码,
				isLogin: false, // 是否可以点击登录
				showDepartment: false,
 			};
 		},
 		onLoad() {
 			if (uni.getStorageSync('username')) {
 				this.form.userName = uni.getStorageSync('username');
 				this.form.password = uni.getStorageSync('password');
 			}
			
			// 是否可以点击登录
			if (this.form.userName && this.form.password) {
				this.isLogin = false
			} else {
				this.isLogin = true
			}
			
			uni.clearStorageSync('tabbarDot')
			// 获取设备信息
			uni.getSystemInfo({
				success: (res)=>{
					if (res.safeArea && res.safeArea.top) {
						this.top = res.safeArea.top + 52
					} else {
						this.top = 52
					}
				}
			});
 		},
 		methods: {
 			...mapActions(['setUserInfo']),
			
			// 查看是否点击登录
			onChangeUserName () {
				if (this.form.userName && this.form.password) {
					this.isLogin = false
				} else {
					this.isLogin = true
				}
			},
			
			onChangePassword () {
				if (this.form.userName && this.form.password) {
					this.isLogin = false
				} else {
					this.isLogin = true
				}
			},
			
			// 点击忘记密码
			onForgetPassword () {
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				})
			},
			
 			//登录
 			_login() {
 				const that = this;
 				if (this.form.userName == '') {
 					uni.showToast({
 						title: '账号不得为空',
 						icon: 'none'
 					})
 				} else if (this.form.password == '') {
 					uni.showToast({
 						title: '密码不得为空',
 						icon: 'none' 
 					})
 				} else {
 					uni.showLoading({
 						title: '登录中...',
 						mask: true
 					})
 					const data = {
 						password: this.form.password,
 						username: this.form.userName,
						
 					}
 					login(data).then( async res => {
 						uni.hideLoading();
						if (!res.success) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							return false
						}
 						await uni.setStorageSync('ACCESS_TOKEN', 'Bearer ' + res.result.accessToken);
						// 在获取用户信息
						http.get('/api/erpmng/sys/oauth/userInfo', {username:res.result.userInfo.username }).then(async ress => {
							uni.setStorageSync('userInfo', ress.result.userInfo);
							this.setUserInfo(ress.result.userInfo);
							this.$store.dispatch('actionsSetIndexList') // 获取首页信息
							this.$store.dispatch('getDictItemsFromCache') // 获取数据字典
							// 获取极光推送注册id值
							var registrationId = await ''
							// #ifdef APP-PLUS
							jpushModule.getRegistrationID(result => {
								registrationId = result.registerID
								uni.removeStorageSync('registerID')
								uni.setStorageSync('registerID', result.registerID);
								if (!registrationId) {
									return false
								}
								var paramsPush = {
									userId: res.result.userInfo.id,
									userName: res.result.userInfo.username,
									registrationId: registrationId,
									empId: res.result.userInfo.empId,
									realName: res.result.userInfo.realname
								}
								sysJpushUserRelationsPush(paramsPush).then(data1 => {
									// 请求成功
								}).catch(err => {
									console.error("JPush注册失败");
								})
							})
							// #endif
							// 获取权限
							store.dispatch('GetPermissionList').then(res => console.log(res)).catch(error => console.log(error))
							// 保存账号和密码
							uni.setStorageSync('username', this.form.userName);
							uni.setStorageSync('password', this.form.password);
							this.showDepartment = true
						})
 					}).catch(res => {
 						uni.hideLoading();
 						uni.showToast({
 							title: res.message || '服务器报错，请重试！',
 							icon: 'none',
 						})
 					})
 				}
 			},
			
			// 选择了部门
			onChoice (item) {
				this.showDepartment = false
				var that = this
				uni.setStorageSync('userInfo', item);
				this.setUserInfo(item);
				this.$refs.uToast.show({
					message: '切换部门成功',
					type: 'success',
					complete() {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				})
			},
			// 没有部门可选
			onNavgat () {
				this.showDepartment = false
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			// 点击部门取消
			onClose () {
				this.showDepartment = false
			}
 		}
 	};
 </script>
 <style lang="scss" scoped>
 	.container {
 		width: 100%;
 		height: 100vh;
		background: #ffffff;
 	}
 
 	.login-title {
		text-align: center;
		image{
			width: 264rpx;
			height: 264rpx;
		}
 	}
 	
 	.content{
		margin: 100rpx 50rpx;
		.form-input{
			margin: 40rpx 0rpx;
			.input-left{
				display: flex;
				align-items: center;
				.text{
					font-size: px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #171717;
				}
			}
			.input{
				margin-top: 20rpx;
				flex: 1;
				// border-bottom: 1px solid #E5E5E5FF;
			}
		}
 	}
 
 	.btn {
 		padding: 0rpx 0 20rpx;
		.custom-style{
			border-radius: 16rpx;
		}
 	}
 
 	.remand {
		text-align: right;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #8F8F8F;
 
 		.name {
 			color: #8F8F8F;
 		}
 		
 		.register{
 			color: #2979ff;
 		}
 	}
	
	// 标语
	.slogan {
		width: 750rpx;
		// height: 42rpx;
		position: fixed;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 88rpx); /*兼容 IOS<11.2*/
		padding-bottom: calc(env(safe-area-inset-bottom) + 88rpx); /*兼容 IOS>11.2*/
		text-align: center;
		background-color: #ffffff;
		image{
			width: 406rpx;
			height: 42rpx;
			
		}
	}
 </style>
 